<template>
    <div class="main">
        <Navi title="注册" back="1" bg="rgba(0,0,0,0)" ></Navi>
        <form>
            <div class="user_view">
                <div class="inputs">
                    <i class="iconfont icon-gerenzhongxin"></i>
                    <input type="text" v-model="form.name" @focus="input_focus" placeholder="请输入昵称">
                </div>
                <div class="line"></div>
            </div>
            <div class="user_view">
                <div class="inputs">
                    <i class="iconfont icon-wode"></i>
                    <input type="text" v-model="form.user" @focus="input_focus" placeholder="请输入账号">
                </div>
                <div class="line"></div>
            </div>
            <div class="user_view">
                <div class="inputs">
                    <i class="iconfont icon-mima"></i>
                    <input type="password" autocomplete="off" @focus="input_focus" v-model="form.password" placeholder="请输入密码">
                </div>
                <div class="line"></div>
            </div>
            <button @click="register()">注册</button>
        </form>
    </div>
</template>
<script>
import {reactive,ref,getCurrentInstance} from 'vue'
import { useRouter,useRoute} from 'vue-router'
//import { useRouter,useRoute } from 'vue-router'
export default {
    setup(){
        const { proxy } = getCurrentInstance()
        const router = useRouter()
        const form = reactive({
            name:"",
            user:'',
            password:"",
        })
        let show_err=ref(false)
        const register=()=>{
            if((form.user&&form.user.length>=6)&&form.password&&form.password.length>=6&&form.name){
                proxy.$ajax.post('add_user',form,(res)=>{
                    alert('注册成功')
                    router.go(-1)
                })
            }else{
                show_err.value=true
            }
        }
        const input_focus=()=>{
            show_err.value=false
        }
        return {form,register,show_err,input_focus}
    }
}
</script>
<style lang="less" scoped>

.err_msg{
    color: red;
    margin-bottom: 20rem;
    font-size: 20rem;
}
.main{
    height: 100vh;
    width: 750rem;
    display: flex;
    background-image: url(../../assets/login.png);
    background-size: 100%;
    align-items: center;
    flex-direction: column;
    form{
        margin-top: 100rem;
        width: 570rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        .user_view{
            width: 100%;
            margin-top: 100rem;
            .inputs{
                height: 50rem;
                align-items: center;
                display: flex;
                margin-bottom: 17rem;
                i{
                    margin-left: 30rem;
                    font-size: 40rem;
                }
                input{
                    margin-left: 18rem;
                    height: 100%;
                    width: 390rem;
                    font-size: 35rem;
                    font-weight: 500;
                    color: #222222;
                    border: 0;
                    text-align: left;
                    background-color: rgba(0,0,0,0);
                }
            }
            .line{
                width: 100%;
                background: #000;
                height: 2px;
            }
        }
        button{
            margin-top: 80rem;
            width: 570rem;
            height: 90rem;
            background: #4270ED;
            border-radius: 8rem;
            border: 0px;
            font-size: 28rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
        }
        .goto_register{
            color: #4270ED;
            margin-top:120rem;
            font-size: 26rem;
        }
    }
}

</style>